<template>
  <a-modal v-model:visible="showModal" :mask-closable="false" title="确认流水" width="45vw" unmount-on-close>
    <div class="section-item gray">
      <div class="section-item-content">
        <a-descriptions :size="size" :align="{ label: 'right' }">
          <a-descriptions-item label="流水号">{{ record.recordCode }}</a-descriptions-item>
          <a-descriptions-item label="费用产生机构">{{ record.orgName }}</a-descriptions-item>
          <a-descriptions-item label="费用名称">{{ record.feeNameStr }}</a-descriptions-item>
          <a-descriptions-item label="收支类型">{{ record.recordTypeName }}</a-descriptions-item>
          <a-descriptions-item label="收支方式">{{ record.paymentWayName }}</a-descriptions-item>
          <a-descriptions-item label="收支账号">{{ record.payAccount }}</a-descriptions-item>
          <a-descriptions-item label="收支金额">{{ record.orderAmount }}</a-descriptions-item>
          <a-descriptions-item label="合计费用">{{ record.orderAmount }}</a-descriptions-item>
          <a-descriptions-item label="确认费用">{{ record.orderAmount }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
    <template #footer>
      <a-button @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onConfirm" :ok-loading="loading">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup name="TurnoverForm">
  import { ref, onMounted } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { confirmTurnover } from '@/api/finance/turnover'

  const record = ref({})
  const showModal = ref(false)

  const show = (data) => {
    record.value = data
    showModal.value = true
  }

  const onClose = () => {
    showModal.value = false
  }

  const emit = defineEmits(['save'])
  const loading = ref(false)
  const onConfirm = () => {
    loading.value = true
    Modal.confirm({
      title: '提示',
      simple: true,
      cancelText: '取消',
      okText: '确认',
      content: '确认提交？',
      onOk: () => {
        const param = {
          id: record.value.id,
        }
        confirmTurnover(param).then(() => {
          loading.value = false
          Message.success('操作成功')
          emit('save')
          showModal.value = false
        })
      },
      onCancel: () => {
        loading.value = false
      },
    })
  }

  defineExpose({
    show,
  })

  onMounted(() => {})
</script>

<style lang="less" scoped>
  .page-form {
    margin: 0;
    height: 300px;
    // padding: 0 60px;
    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
</style>
